<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			textarea {
				resize: unset;
			}
		</style>
	</head>
	<body>
		<h1>表单相关的重要标签</h1>
		<ul>
			<li>
				<p>label标签：点击label标签，可以让其指向的input等表单项标签获取到焦点。</p>
				<p>使用for属性，绑定指定表单项的id值</p>
				<p>开发技巧：通常建议表单项的id和name值相同</p>
				<p>使用label标签包裹input标签，也可以达到设置焦点的作用</p>
			</li>
			<li>input标签，表单项。包含文本框，单选框，复选框，文件上传框，隐藏几种类型。</li>
			<li>select标签，表单项。下拉框（通常使用单选下拉框）</li>
			<li>textarea标签，文本域。一段文字。</li>
			<li>fieldset标签，把一组表单项集中一下（无特别意义）</li>
			<li>legend标签，fieldset标签展示的标题（无特别意义）</li>
		</ul>
		<h1>表单项标签的要点</h1>
		<ul>
			<li>input/select/textarea标签，请首先设置name属性，只有有name属性时，表单项填写的内容，才会被表单提交到服务器去</li>
			<li>没有name属性的话，即使用户填写了内容，提交表单之后也无法收集用户信息</li>
			<li>name属性值是可以重复的，这样一个参数会提交多个值到服务器</li>
			<li>单选框，通过name属性进行互斥的</li>
		</ul>
		<h1>input的type属性</h1>
		<dl>
			<dt>type属性用于指示input的类型</dt>
			<dl>text：默认，普通文本框</dl>
			<dl>password：密码框</dl>
			<dl>radio：单选框</dl>
			<dl>checkbox：复选框</dl>
			<dl>hidden：隐藏域</dl>
			<dl>file：文件选择</dl>
			<dl>reset：重置按钮（用于重置表单）</dl>
			<dl>submit：提交按钮（用于提交表单）</dl>
			<dl>button：普通按钮</dl>
			<dl>date：日期选择（HTML5新增）</dl>
			<dl>color：颜色选择（HTML5新增）</dl>
			<dl>range：滑动选择（HTML5新增）</dl>
		</dl>
		<h1>input/select的value属性</h1>
		<p>value属性用于指示表单项的值</p>
		<p>input：文本框中的内容</p>
		<p>select：设置select的默认选择项</p>
		<div>
			<form id="myForm" action="#" method="GET" enctype="application/x-www-form-urlencoded" target="_self">
				<fieldset>
				<legend align="left">登录信息</legend>
				<label for="username">用户名1：</label><input placeholder="请填写用户名" type="text" name="username" id="username"/><br/>
				<label>密码：<input type="password" name="password"/></label><br/>
				</fieldset>
				<label>性别：</label>男：<input type="radio" name="sex" value="1"/>女：<input type="radio" name="sex" value="2"/><br/>
				<label>取向：</label>男：<input type="checkbox" name="need" value="1"/>女：<input type="checkbox" name="need" value="2" checked/><br/>
				<label for="major">专业：</label>
				<select name="major" id="major">
					<option value=""></option>
					<option value="1">电子商务</option>
					<option value="2">计算机应用科学与技术</option>
					<option value="3" selected>信息安全与技术</option>
				</select><br/>
				<label for="head">头像：</label><input type="file" name="head" id="head"/><br/>
				<label for="remark">备注：</label><textarea id="remark" name="remark"></textarea>
				<input type="hidden" name="hidden" value="1"/>
				<input type="submit" value="提交"/><input type="reset" value="重置"/>
				<input type="button" value="按钮"/>
				<button>提交按钮</button>
			</form>
		</div>
	</body>
</html>
